import Dialog from "@/components/dialog/index";
export default class CanvasUtils {
    constructor(canvasId) {
      this.canvas = document.getElementById(canvasId);
      this.context = this.canvas.getContext('2d');
      this.dialogInstance = new Dialog()//弹窗

      this.stridePoints = {};//当前绘制跨越线
      this.strideList = [];//所有跨越线集合
      this.activeStride = null;//当前选中跨越线
      this.activeStrideIndex = null//当前选中跨越线索引

      this.linePoints = {};//当前绘制线条
      this.lineList = [];//所有线条集合
      this.activeLine = null;//当前选中线条
      this.activeLineIndex = null//当前选中线条索引

      this.arrowPoints = {};//当前绘制的箭头
      this.arrowList = [];//所有箭头集合
      this.activeArrow = null;//当前选中箭头
      this.activeArrowIndex = null//当前选中箭头索引

      this.polygonPoints = [];//当前绘制的多边形
      this.polygonList = [];//所有多边形集合
      this.activePolygon = null;//当前选中多边形
      this.activePolygonIndex = null//当前选中多边形索引

      this.clickPoint = null//当前点击的位置
      this.drawStatus = null//用于指定绘制的对象
      this.startDrawing = false//开始绘制

      this.activeCircleIndex = -1//用于指定圆圈索引或属性
      this.clickTime = new Date().getTime()//用于指定当前时间，解决双击点击冲突
    }
    // 初始化
    initCanvas = (polygonList = []) => {
        //重置
        this.clickPoint = null
        // 重置多边形信息
        this.polygonPoints = []
        // 重置箭头信息
        this.arrowPoints = {}
        // 重置线条信息
        this.linePoints = {}
        // 重置跨越线信息
        this.stridePoints = {}

        // 获取区域
        this.polygonList = polygonList
        // 重绘
        this.drawCanvas()
        // 添加点击监听
        this.canvas.addEventListener('click', this.onCanvasClick);
    }
    // 清空选中信息
    clearActive = () => {
        this.activePolygon = null
        this.activePolygonIndex =  null
        this.activeArrow = null
        this.activeArrowIndex = null
        this.activeLine = null
        this.activeLineIndex = null
        this.activeStride = null
        this.activeStrideIndex = null
    }
    // canvas点击事件
    onCanvasClick = (event) => {
        // 解决双击点击冲突
        if(new Date().getTime() - this.clickTime < 300){
            return
        }
        // 关闭弹窗--start
        this.dialogInstance.closeAll()
        this.canvas.removeEventListener('contextmenu', this.setStrideContextmenu);
        // 关闭弹窗--end
        const { offsetX, offsetY } = event;
        // 获取点击位置
        let point = { x: offsetX, y: offsetY }
        // 判断是否开始绘制
        if(this.startDrawing){
            // 判断选中按钮状态
            if(this.drawStatus == null){
                alert('请选择绘制目标')
                return
            }
            switch(this.drawStatus){
                // 绘制多边形
                case 'drawPolygon':
                    this.startPolygonDraw(event)
                    break
                // 绘制箭头
                case 'drawArrow':
                    // 如果有end 则当前绘制结束
                    if(this.arrowPoints.end){
                        this.onArrowEnd()
                    }else{
                        this.startArrowDraw(event)
                    }
                    break
                // 绘制线条
                case 'drawLine':
                    // 如果有end 则当前绘制结束
                    if(this.linePoints.end){
                        this.onLineEnd()
                    }else{
                        this.startLineDraw(event)
                    }
                    break
                // 绘制线条
                case 'drawStride':
                    // 如果有end 则当前绘制结束
                    if(this.stridePoints.end){
                        this.onStrideEnd()
                    }else{
                        this.startStrideDraw(event)
                    }
                    break
            }
        }
        else{
            // 没有点击开始绘制
            // 1.判断当前点击元素
            let isOutwardIndex = null
            let isOutwardKey = null
            // 判断当前点击是否在多边形
            this.polygonList.forEach((item,index) => {
                this.activeCircleIndex = this.pointRepeat(point, item)
                // 判断点击了框 1.点击了圆圈 则默认也选择了框 2.点击位置在框内 则判断为选择了框
                if(this.activeCircleIndex != -1 || this.pointInPoly(point, item)){
                    isOutwardIndex = index
                    isOutwardKey = 'polygon'
                }
            })
            // 判断点击是否在箭头上
            this.arrowList.forEach((item,index) => {
                this.activeCircleIndex = this.pointRepeat(point, item)
                // 判断点击了箭头 1.点击了圆圈 则默认也选择了箭头 2.点击位置在箭头内 则判断为选择了箭头
                if(this.activeCircleIndex != -1 || this.isPointOnLineSegment(item.start, item.end, point)){
                    isOutwardIndex = index
                    isOutwardKey = 'arrow'
                }
            })
            // 判断点击是否在线条上
            this.lineList.forEach((item,index) => {
                this.activeCircleIndex = this.pointRepeat(point, item)
                // 判断点击了线条 1.点击了圆圈 则默认也选择了线条 2.点击位置在线条内 则判断为选择了线条
                if(this.activeCircleIndex != -1 || this.isPointOnLineSegment(item.start, item.end, point)){
                    isOutwardIndex = index
                    isOutwardKey = 'line'
                }
            })
            // 判断点击是否在跨越线上
            this.strideList.forEach((item,index) => {
                this.activeCircleIndex = this.pointRepeat(point, item)
                // 判断点击了跨越线 1.点击了圆圈 则默认也选择了跨越线 2.点击位置在跨越线内 则判断为选择了跨越线
                if(this.activeCircleIndex != -1 || this.isPointOnLineSegment(item.start, item.end, point)){
                    isOutwardIndex = index
                    isOutwardKey = 'stride'
                }
            })
            if(isOutwardKey){
                // 选中当前元素  执行拖动,隐藏等逻辑
                switch(isOutwardKey){
                    case 'polygon':
                        // 1.获取当前点击的框 并清除其他选中样式
                        this.clearActive()
                        this.activePolygon = this.polygonList[isOutwardIndex]
                        this.activePolygonIndex = isOutwardIndex
                        // 2.重绘当前选中框样式
                        this.drawCanvas()
                        this.canvas.addEventListener('mousedown', this.dragPolygonMouseDown);
                        break
                    case 'arrow':
                        // 1.获取当前点击的框 并清除其他选中样式
                        this.clearActive()
                        this.activeArrow = this.arrowList[isOutwardIndex]
                        this.activeArrowIndex = isOutwardIndex
                        // 2.重绘当前选中框样式
                        this.drawCanvas()
                        this.canvas.addEventListener('mousedown', this.dragArrowMouseDown);
                        break
                    case 'line':
                        // 1.获取当前点击的框 并清除其他选中样式
                        this.clearActive()
                        this.activeLine = this.lineList[isOutwardIndex]
                        this.activeLineIndex = isOutwardIndex
                        // 2.重绘当前选中框样式
                        this.drawCanvas()
                        this.canvas.addEventListener('mousedown', this.dragLineMouseDown);
                        break
                    case 'stride':
                        // 1.获取当前点击的框 并清除其他选中样式
                        this.clearActive()
                        this.activeStride = this.strideList[isOutwardIndex]
                        this.activeStrideIndex = isOutwardIndex
                        // 2.重绘当前选中框样式
                        this.drawCanvas()
                        this.canvas.addEventListener('mousedown', this.dragStrideMouseDown);
                        this.canvas.addEventListener('contextmenu', this.setStrideContextmenu);
                        break
                }
            }else{
                // 没选中任何元素
                console.log('未选中元素')
                this.clearActive()
                this.drawCanvas()
                return 
            }
        }
        // 更新点击时间
        this.clickTime = new Date().getTime()
    }
    // 设置跨越线的跨越方向
    setStrideContextmenu = (event) => {
        event.returnValue = false || event.preventDefault();
        this.dialogInstance.showDialog({
            title: '设置检测线方向',
            isSingle: true,
            position: { left: event.clientX, top: event.clientY },
            callback: (val)=> {
                return new Promise((resolve)=> {
                    console.log(val)
                    // 设置虚线样式
                    // ......
                    resolve()
                })
            }
        });
    }
    // 确认开始拖拽跨越线
    dragStrideMouseDown = (event) => {
        // 判断点击了圆圈
        const { offsetX, offsetY } = event;
        // 获取点击位置
        let point = { x: offsetX, y: offsetY }
        if(this.strideList[this.activeStrideIndex]){
            this.activeCircleIndex = this.pointRepeat(point, this.strideList[this.activeStrideIndex])
        }
        // 点击圆圈
        if(this.activeCircleIndex != -1){
            this.canvas.addEventListener('mousemove', this.editStrideMouseMove);
            this.canvas.addEventListener('mouseup', this.editStrideMouseup);
            // 清除拖动绑定事件
            this.canvas.removeEventListener('mousemove', this.dragStrideMouseMove);
            this.canvas.removeEventListener('mouseup', this.dragStrideMouseup);
        }
        // 点击线条
        else{
            this.canvas.addEventListener('mousemove', this.dragStrideMouseMove);
            this.canvas.addEventListener('mouseup', this.dragStrideMouseup);
            // 清除圆圈绑定事件
            this.canvas.removeEventListener('mousemove', this.editStrideMouseMove);
            this.canvas.removeEventListener('mouseup', this.editStrideMouseup);
        }
    }
    // 拖动线条开始
    dragStrideMouseMove = (event) => {
        this.activeStride = {
            start: {
                x: this.activeStride.start.x + event.movementX,
                y: this.activeStride.start.y + event.movementY
            },
            end: {
                x: this.activeStride.end.x + event.movementX,
                y: this.activeStride.end.y + event.movementY
            },
        }
        if(this.activeStrideIndex!=null){
            this.strideList[this.activeStrideIndex] = this.activeStride
        }
        this.drawCanvas()
    }
    // 拖动跨越线结束
    dragStrideMouseup = () => {
        this.activeStride = null;//当前选中跨越线
        this.activeStrideIndex = null//当前选中跨越线索引
        this.canvas.removeEventListener('mousemove', this.dragStrideMouseMove);
        this.canvas.removeEventListener('mouseup', this.dragStrideMouseup);
        this.canvas.removeEventListener('mousedown', this.dragStrideMouseDown);
    }
    // 拖动跨越线圆圈开始
    editStrideMouseMove = (event) => {
        let point = this.strideList[this.activeStrideIndex][this.activeCircleIndex]
        this.strideList[this.activeStrideIndex][this.activeCircleIndex] = {
            x: point.x + event.movementX,
            y: point.y + event.movementY
        }
        this.drawCanvas()
    }
    // 拖动跨越线圆圈结束 
    editStrideMouseup = () => {
        this.activeStride = null;//当前选中跨越线
        this.activeStrideIndex = null//当前选中跨越线索引
        this.activeCircleIndex = -1
        this.canvas.removeEventListener('mousemove', this.editStrideMouseMove);
        this.canvas.removeEventListener('mouseup', this.editStrideMouseup);
        this.canvas.removeEventListener('mousedown', this.dragStrideMouseDown)
    }
    // 确认开始拖动线条
    dragLineMouseDown = (event) => {
        // 判断点击了圆圈
        const { offsetX, offsetY } = event;
        // 获取点击位置
        let point = { x: offsetX, y: offsetY }
        if(this.lineList[this.activeLineIndex]){
            this.activeCircleIndex = this.pointRepeat(point, this.lineList[this.activeLineIndex])
        }
        if(this.activeCircleIndex != -1){
            this.canvas.addEventListener('mousemove', this.editLineMouseMove);
            this.canvas.addEventListener('mouseup', this.editLineMouseup);
            // 清除拖动绑定事件
            this.canvas.removeEventListener('mousemove', this.dragLineMouseMove);
            this.canvas.removeEventListener('mouseup', this.dragLineMouseup);
        }
        else{
            this.canvas.addEventListener('mousemove', this.dragLineMouseMove);
            this.canvas.addEventListener('mouseup', this.dragLineMouseup);
            // 清除圆圈绑定事件
            this.canvas.removeEventListener('mousemove', this.editLineMouseMove);
            this.canvas.removeEventListener('mouseup', this.editLineMouseup);
        }
    }
    // 拖动线条开始
    dragLineMouseMove = (event) => {
        this.activeLine = {
            start: {
                x: this.activeLine.start.x + event.movementX,
                y: this.activeLine.start.y + event.movementY
            },
            end: {
                x: this.activeLine.end.x + event.movementX,
                y: this.activeLine.end.y + event.movementY
            },
        }
        if(this.activeLineIndex!=null){
            this.lineList[this.activeLineIndex] = this.activeLine
        }
        this.drawCanvas()
    }
    // 拖动线条结束
    dragLineMouseup = () => {
        this.activeLine = null;//当前选中多边形
        this.activeLineIndex = null//当前选中多边形索引
        this.canvas.removeEventListener('mousemove', this.dragLineMouseMove);
        this.canvas.removeEventListener('mouseup', this.dragLineMouseup);
        this.canvas.removeEventListener('mousedown', this.dragLineMouseDown);
    }
    // 拖动线条圆圈开始
    editLineMouseMove = (event) => {
        let point = this.lineList[this.activeLineIndex][this.activeCircleIndex]
        this.lineList[this.activeLineIndex][this.activeCircleIndex] = {
            x: point.x + event.movementX,
            y: point.y + event.movementY
        }
        this.drawCanvas()
    }
    // 拖动线条圆圈结束 
    editLineMouseup = () => {
        this.activeLine = null;//当前选中多边形
        this.activeLineIndex = null//当前选中多边形索引
        this.activeCircleIndex = -1
        this.canvas.removeEventListener('mousemove', this.editLineMouseMove);
        this.canvas.removeEventListener('mouseup', this.editLineMouseup);
        this.canvas.removeEventListener('mousedown', this.dragLineMouseDown)
    }
    // 确认开始拖动箭头
    dragArrowMouseDown = (event) => {
        // 判断点击了圆圈
        const { offsetX, offsetY } = event;
        // 获取点击位置
        let point = { x: offsetX, y: offsetY }
        if(this.arrowList[this.activeArrowIndex]){
            this.activeCircleIndex = this.pointRepeat(point, this.arrowList[this.activeArrowIndex])
        }
        if(this.activeCircleIndex != -1){
            this.canvas.addEventListener('mousemove', this.editArrowMouseMove);
            this.canvas.addEventListener('mouseup', this.editArrowMouseup);
            // 清除拖动绑定事件
            this.canvas.removeEventListener('mousemove', this.dragArrowMouseMove);
            this.canvas.removeEventListener('mouseup', this.dragArrowMouseup);
        }
        else{
            this.canvas.addEventListener('mousemove', this.dragArrowMouseMove);
            this.canvas.addEventListener('mouseup', this.dragArrowMouseup);
            // 清除圆圈绑定事件
            this.canvas.removeEventListener('mousemove', this.editArrowMouseMove);
            this.canvas.removeEventListener('mouseup', this.editArrowMouseup);
        }
    }
    // 拖动箭头开始
    dragArrowMouseMove = (event) => {
        this.activeArrow = {
            start: {
                x: this.activeArrow.start.x + event.movementX,
                y: this.activeArrow.start.y + event.movementY
            },
            end: {
                x: this.activeArrow.end.x + event.movementX,
                y: this.activeArrow.end.y + event.movementY
            },
        }
        if(this.activeArrowIndex!=null){
            this.arrowList[this.activeArrowIndex] = this.activeArrow
        }
        this.drawCanvas()
    }
    // 拖动箭头结束
    dragArrowMouseup = () => {
        this.activeArrow = null;//当前选中多边形
        this.activeArrowIndex = null//当前选中多边形索引
        this.canvas.removeEventListener('mousemove', this.dragArrowMouseMove);
        this.canvas.removeEventListener('mouseup', this.dragArrowMouseup);
        this.canvas.removeEventListener('mousedown', this.dragArrowMouseDown);
    }
    // 拖动箭头圆圈开始
    editArrowMouseMove = (event) => {
        let point = this.arrowList[this.activeArrowIndex][this.activeCircleIndex]
        this.arrowList[this.activeArrowIndex][this.activeCircleIndex] = {
            x: point.x + event.movementX,
            y: point.y + event.movementY
        }
        this.drawCanvas()
    }
    // 拖动箭头圆圈结束 
    editArrowMouseup = () => {
        this.activeArrow = null;//当前选中多边形
        this.activeArrowIndex = null//当前选中多边形索引
        this.activeCircleIndex = -1
        this.canvas.removeEventListener('mousemove', this.editArrowMouseMove);
        this.canvas.removeEventListener('mouseup', this.editArrowMouseup);
        this.canvas.removeEventListener('mousedown', this.dragArrowMouseDown)
    }
    // 确认开始拖动多边形
    dragPolygonMouseDown = (event) => {
        // 判断点击了圆圈
        const { offsetX, offsetY } = event;
        // 获取点击位置
        let point = { x: offsetX, y: offsetY }
        if(this.polygonList[this.activePolygonIndex]){
            this.activeCircleIndex = this.pointRepeat(point, this.polygonList[this.activePolygonIndex])
        }
        if(this.activeCircleIndex != -1){
            this.canvas.addEventListener('mousemove', this.editPolygonMouseMove);
            this.canvas.addEventListener('mouseup', this.editPolygonMouseup);
            // 清除拖动绑定事件
            this.canvas.removeEventListener('mousemove', this.dragPolygonMouseMove);
            this.canvas.removeEventListener('mouseup', this.dragPolygonMouseup);
        }
        else{
            this.canvas.addEventListener('mousemove', this.dragPolygonMouseMove);
            this.canvas.addEventListener('mouseup', this.dragPolygonMouseup);
            // 清除圆圈绑定事件
            this.canvas.removeEventListener('mousemove', this.editPolygonMouseMove);
            this.canvas.removeEventListener('mouseup', this.editPolygonMouseup);
        }
        
    }
    // 拖动多边形开始
    dragPolygonMouseMove = (event) => {
        let newArr = this.activePolygon.map(item=> {
            let obj = {
                x: item.x + event.movementX,
                y: item.y + event.movementY,
            }
            return obj
        })
        this.activePolygon = JSON.parse(JSON.stringify(newArr))
        if(this.activePolygonIndex!=null){
            this.polygonList[this.activePolygonIndex] = this.activePolygon
        }
        this.drawCanvas()
    }
    // 拖动多边形结束
    dragPolygonMouseup = () => {
        this.activePolygon = null;//当前选中多边形
        this.activePolygonIndex = null//当前选中多边形索引
        this.canvas.removeEventListener('mousemove', this.dragPolygonMouseMove);
        this.canvas.removeEventListener('mouseup', this.dragPolygonMouseup);
        this.canvas.removeEventListener('mousedown', this.dragPolygonMouseDown);
    }
    // 拖动多边形圆圈开始
    editPolygonMouseMove = (event) => {
        // 当选择了第一个或最后一个圆圈时，两个圆圈点位是重复的，需要同时更改两个圆圈
        if(this.activeCircleIndex == 0 || this.activeCircleIndex == this.polygonList[this.activePolygonIndex].length - 1) {
            let point = this.polygonList[this.activePolygonIndex][this.activeCircleIndex]
            this.polygonList[this.activePolygonIndex][0] = {
                x: point.x + event.movementX,
                y: point.y + event.movementY
            }
            this.polygonList[this.activePolygonIndex][this.polygonList[this.activePolygonIndex].length - 1] = {
                x: point.x + event.movementX,
                y: point.y + event.movementY
            }
        }else{
            let point = this.polygonList[this.activePolygonIndex][this.activeCircleIndex]
            this.polygonList[this.activePolygonIndex][this.activeCircleIndex] = {
                x: point.x + event.movementX,
                y: point.y + event.movementY
            }
        }
        this.drawCanvas()
    }
    // 拖动多边形圆圈结束
    editPolygonMouseup = () => {
        this.activePolygon = null;//当前选中多边形
        this.activePolygonIndex = null//当前选中多边形索引
        this.activeCircleIndex = -1
        this.canvas.removeEventListener('mousemove', this.editPolygonMouseMove);
        this.canvas.removeEventListener('mouseup', this.editPolygonMouseup);
        this.canvas.removeEventListener('mousedown', this.dragPolygonMouseDown)
    }
    // 开始跨越线绘制
    startStrideDraw = (event) => {
        const { offsetX, offsetY } = event;
        let point = { x: offsetX, y: offsetY }
        this.clickPoint = point
        // 记录当前点击
        this.stridePoints = {
            start: {x: offsetX, y: offsetY},
        }
        // 移动动态绘制箭头
        this.canvas.addEventListener('mousemove', this.onStrideMouseMove);
    }
    // 结束跨越线绘制
    onStrideEnd = () => {
        this.canvas.removeEventListener('mousemove', this.onStrideMouseMove)
        this.strideList.push(this.stridePoints)
        this.stridePoints = {}
        this.drawCanvas()
    }
    // 绘制跨越线
    onStrideMouseMove = (event) => {
        const { offsetX, offsetY } = event;
        this.stridePoints.end = {x: offsetX, y: offsetY},
        this.drawCanvas()
    }
    // 开始线条绘制
    startLineDraw = (event) => {
        const { offsetX, offsetY } = event;
        let point = { x: offsetX, y: offsetY }
        this.clickPoint = point
        // 记录当前点击
        this.linePoints = {
            start: {x: offsetX, y: offsetY},
        }
        // 移动动态绘制箭头
        this.canvas.addEventListener('mousemove', this.onLineMouseMove);
    }
    // 结束线条绘制
    onLineEnd = () => {
        this.canvas.removeEventListener('mousemove', this.onLineMouseMove)
        this.lineList.push(this.linePoints)
        this.linePoints = {}
        this.drawCanvas()
    }
    // 绘制线条
    onLineMouseMove = (event) => {
        const { offsetX, offsetY } = event;
        this.linePoints.end = {x: offsetX, y: offsetY},
        this.drawCanvas()
    }
    // 开始箭头绘制
    startArrowDraw = (event) => {
        const { offsetX, offsetY } = event;
        let point = { x: offsetX, y: offsetY }
        this.clickPoint = point
        // 记录当前点击
        this.arrowPoints = {
            start: {x: offsetX, y: offsetY},
        }
        // 移动动态绘制箭头
        this.canvas.addEventListener('mousemove', this.onArrowMouseMove);
    }
    // 绘制箭头
    onArrowMouseMove = (event) => {
        const { offsetX, offsetY } = event;
        this.arrowPoints.end = {x: offsetX, y: offsetY},
        this.drawCanvas()
    }
    // 结束箭头绘制
    onArrowEnd = () => {
        this.canvas.removeEventListener('mousemove', this.onArrowMouseMove)
        this.arrowList.push(this.arrowPoints)
        this.arrowPoints = {}
        this.drawCanvas()
    }
    // 开始多边形绘制
    startPolygonDraw = (event) => {
        const { offsetX, offsetY } = event;
        let point = { x: offsetX, y: offsetY }
        this.clickPoint = point
        // 记录当前点击
        this.polygonPoints.push(point);
        // 移动动态绘制边
        this.canvas.addEventListener('mousemove', this.onPolygonMouseMove);
        // 双击结束绘制
        this.canvas.addEventListener('dblclick', this.onPolygonEnd);
    }
    // 绘制多边形边
    onPolygonMouseMove = (event) => {
        const { offsetX, offsetY } = event;
        this.polygonPoints.push({ x: offsetX, y: offsetY });
        this.drawCanvas()
        // 删除上一次的点
        this.polygonPoints.splice(this.polygonPoints.length-1,1)
    }
    // 结束多边形绘制
    onPolygonEnd= () =>{
        this.polygonPoints.push(this.polygonPoints[0]);
        this.drawCanvas()
        this.canvas.removeEventListener('mousemove', this.onPolygonMouseMove)
        this.canvas.removeEventListener('dblclick', this.onPolygonEnd)
        this.polygonList.push(this.polygonPoints)
        this.polygonPoints = []
    }
    // 绘画函数
    drawCanvas = () => {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        // 当前多边形绘制
        if(this.polygonPoints.length>0){
            this.drawCanvasPolygon(this.polygonPoints)
        }
        // 绘制多边形组
        for(let i = 0; i < this.polygonList.length; i++){
            let isActive = false
            if(this.activePolygon == this.polygonList[i]){
                isActive = true
            }
            this.drawCanvasPolygon(this.polygonList[i], isActive)
        }
        // 当前箭头绘制
        if(this.arrowPoints.start&&this.arrowPoints.end){
            this.drawCanvasArrow(this.arrowPoints)
        }
        // 绘制箭头组
        for(let i = 0; i < this.arrowList.length; i++){
            let isActive = false
            if(this.activeArrow == this.arrowList[i]){
                isActive = true
            }
            this.drawCanvasArrow(this.arrowList[i], isActive)
        }
        // 绘制线条
        if(this.linePoints.start&&this.linePoints.end){
            this.drawCanvasLine(this.linePoints)
        }
        // 绘制线条组
        for(let i = 0; i < this.lineList.length; i++){
            let isActive = false
            if(this.activeLine == this.lineList[i]){
                isActive = true
            }
            this.drawCanvasLine(this.lineList[i], isActive)
        }
        // 绘制跨越线
        if(this.stridePoints.start&&this.stridePoints.end){
            this.drawCanvasStride(this.stridePoints)
        }
        // 绘制跨越线组
        for(let i = 0; i < this.strideList.length; i++){
            let isActive = false
            if(this.activeStride == this.strideList[i]){
                isActive = true
            }
            this.drawCanvasStride(this.strideList[i], isActive)
        }
    }
    // 跨越线绘制函数
    drawCanvasStride = (stridePoints, isActive) => {
        this.context.setLineDash([]);
        this.context.beginPath();
        this.context.moveTo(stridePoints.start.x, stridePoints.start.y);
        this.context.lineTo(stridePoints.end.x, stridePoints.end.y);
        this.context.lineWidth = '3'
        this.context.stroke();
        this.context.closePath()
        // 绘制两侧跨越线
        let leftStride = this.calculateParallelLine(stridePoints.start, stridePoints.end, 'left')
        let rightStride = this.calculateParallelLine(stridePoints.start, stridePoints.end)
        // 左侧
        this.context.setLineDash([]);
        this.context.beginPath();
        this.context.moveTo(leftStride.start.x, leftStride.start.y);
        this.context.lineTo(leftStride.end.x, leftStride.end.y);
        this.context.lineWidth = '3'
        this.context.stroke();
        this.context.closePath()
        // 右侧
        this.context.setLineDash([20, 5]);
        this.context.beginPath();
        this.context.moveTo(rightStride.start.x, rightStride.start.y);
        this.context.lineTo(rightStride.end.x, rightStride.end.y);
        this.context.lineWidth = '3'
        this.context.stroke();
        this.context.closePath()
        // 画圈
        if(isActive){
            this.addCircle(stridePoints)
        }
    }
    // 线条绘制函数
    drawCanvasLine = (linePoints, isActive) => {
        this.context.setLineDash([]);
        this.context.beginPath();
        this.context.moveTo(linePoints.start.x, linePoints.start.y);
        this.context.lineTo(linePoints.end.x, linePoints.end.y);
        this.context.lineWidth = '3'
        this.context.stroke();
        this.context.closePath()
        if(isActive){
            this.addCircle(linePoints)
        }
    }
    // 多边形绘制函数
    drawCanvasPolygon = (polygonPoints, isActive) => {
        this.context.setLineDash([]);
        this.context.beginPath();
        this.context.lineTo(polygonPoints[0].x, polygonPoints[0].y);
        for(let i = 1;i < polygonPoints.length;i++){
            this.context.lineTo(polygonPoints[i].x, polygonPoints[i].y);
        }
        this.context.lineWidth = '3'
        this.context.stroke();
        this.context.closePath()
        if(isActive){
            this.addCircle(polygonPoints)
        }
    }
    // 箭头绘制函数
    drawCanvasArrow = (arrowPoints, isActive) => {
        this.context.setLineDash([]);
        this.context.beginPath();
        this.context.moveTo(arrowPoints.start.x, arrowPoints.start.y);
        this.context.lineTo(arrowPoints.end.x, arrowPoints.end.y);
        this.context.stroke();
        // 绘制箭头头部
        let angle = Math.atan2(arrowPoints.end.y - arrowPoints.start.y, arrowPoints.end.x - arrowPoints.start.x);
        this.context.setLineDash([]);
        this.context.beginPath();
        this.context.moveTo(arrowPoints.end.x, arrowPoints.end.y);
        this.context.lineTo(arrowPoints.end.x - 10 * Math.cos(angle - Math.PI / 6), arrowPoints.end.y - 10 * Math.sin(angle - Math.PI / 6));
        this.context.stroke();
        this.context.moveTo(arrowPoints.end.x, arrowPoints.end.y);
        this.context.lineTo(arrowPoints.end.x - 10 * Math.cos(angle + Math.PI / 6), arrowPoints.end.y - 10 * Math.sin(angle + Math.PI / 6));
        this.context.stroke();
        this.context.lineWidth = 3
        this.context.closePath()
        if(isActive){
            this.addCircle(arrowPoints)
        }
    }
    addCircle = (target) => {
        // 1.改变背景色
        this.context.fillStyle = 'rgba(0,255,0,0.1)'
        this.context.fill()
        // 2.添加圈圈
        for(let i in target){
            let circle = target[i];
            this.context.globalAlpha = 1;
            this.context.setLineDash([]);
            this.context.beginPath();
            this.context.lineWidth = 3;
            this.context.arc(circle.x, circle.y, 4, 0, Math.PI * 2);
            this.context.fillStyle = "#67C23A";
            this.context.fill();
            this.context.stroke();
        }
    }
    setStartDrawing = (flag) => {
        this.startDrawing = flag
    }
    setDrawStatus = (key) => {
        this.drawStatus = key
    }
    // 判断pt坐标是否在poly坐标集合区域内
    pointInPoly = (pt, poly) => {
        let isIn = false;
        if (poly && Array.isArray(poly)) {
          for (let i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
            ((poly[i]["y"] <= pt["y"] && pt["y"] < poly[j]["y"]) || (poly[j]["y"] <= pt["y"] && pt["y"] < poly[i]["y"]))
              && (pt["x"] < (poly[j]["x"] - poly[i]["x"]) * (pt["y"] - poly[i]["y"]) / (poly[j]["y"] - poly[i]["y"]) + poly[i]["x"])
              && (isIn = !isIn);
          return isIn;
        }
        return false;
    }
    // 计算startPoint, endPoint之间连成线段的平行线
    calculateParallelLine = (startPoint, endPoint, flag) => {
        let parallelDistance = 7
        if(flag == 'left'){
            parallelDistance = -7
        }else{
            parallelDistance = 7
        }
        let shortenDistance = 5;
        // 计算线段的长度
        let distance = Math.sqrt((endPoint.x - startPoint.x) ** 2 + (endPoint.y - startPoint.y) ** 2);

        // 计算单位向量
        let unitVectorX = (endPoint.x - startPoint.x) / distance;
        let unitVectorY = (endPoint.y - startPoint.y) / distance;

        // 计算平行线的起始点位置
        
        let parallelLineStartPoint = {
            x: startPoint.x + parallelDistance * unitVectorY + shortenDistance * unitVectorX,
            y: startPoint.y - parallelDistance * unitVectorX + shortenDistance * unitVectorY
        };

        // 计算平行线的结束点位置
        let parallelLineEndPoint = {
            x: endPoint.x + parallelDistance * unitVectorY - shortenDistance * unitVectorX,
            y: endPoint.y - parallelDistance * unitVectorX - shortenDistance * unitVectorY
        };

        return {
            start: parallelLineStartPoint,
            end: parallelLineEndPoint
        };
      }
    // 判断pointC点是否在pointA与pointC连接的线条上
    isPointOnLineSegment = (pointA, pointB, pointC) => {
        // 计算点C到点A和点B的距离
        let distanceAC = Math.sqrt((pointC.x - pointA.x) ** 2 + (pointC.y - pointA.y) ** 2);
        let distanceBC = Math.sqrt((pointC.x - pointB.x) ** 2 + (pointC.y - pointB.y) ** 2);
      
        // 计算点A到点B的距离
        let distanceAB = Math.sqrt((pointB.x - pointA.x) ** 2 + (pointB.y - pointA.y) ** 2);
        // 判断点C是否在线段AB上
        if (Math.abs(distanceAC + distanceBC - distanceAB) < 0.1) {
          return true;
        } else {
          return false;
        }
      }
    // 判断点击点位是否在圈中
    pointRepeat = (pt, repeat) => {
        if(Array.isArray(repeat)){
            for (let i = 0, len = repeat.length; i < len; i++) {
                //使用勾股定理计算这个点与圆心之间的距离
                if (Math.abs(repeat[i]["y"] - pt.y) < 8 && Math.abs(repeat[i]["x"] - pt.x) < 8) {
                  return i;
                }
            }
            return -1;
        }else{
            if (Math.abs(repeat['start']["y"] - pt.y) < 8 && Math.abs(repeat['start']["x"] - pt.x) < 8) {
                return 'start';
            }else if(Math.abs(repeat['end']["y"] - pt.y) < 8 && Math.abs(repeat['end']["x"] - pt.x) < 8) {
                return 'end';
            }else{
                return -1
            }
        }
    }
}